<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="../../css/mui.min.css" />
<link rel="stylesheet" href="../../css/app.css" />
<style type="text/css">
    body {
        background: transparent;
    }
    .mui-content {
        background: transparent;
        background: rgba(255, 0, 0, .1);
    }
    .mui-grid-view.mui-grid-9 {
        background: #fff;
        margin: 0;
    }
</style>
</head>

<body>
    <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9" style="position: fixed;bottom: 0;">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-home"></span>
                    <div class="mui-media-body">Home</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
                    <div class="mui-media-body">Email</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <div class="mui-media-body">Chat</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-location"></span>
                    <div class="mui-media-body">Location</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-search"></span>
                    <div class="mui-media-body">Search</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-phone"></span>
                    <div class="mui-media-body">Phone</div>
                </a>
            </li>
        </ul>

    </div>
    <script src="../../js/mui.min.js"></script>
    <script type="text/javascript">
        (function($, doc) {
            $.init({
                beforeback: function() {
                    closeSelf();
                    return false;
                }
            });

            function closeSelf() {
                plus.webview.currentWebview().hide('slide-out-bottom', 200);
                setTimeout(function() {
                    plus.webview.getWebviewById('main').setStyle({
                        mask: 'none'
                    });
                }, 200);
            }
            $.plusReady(function() {
                // 获取分享区域的高度，动态改变分享webview的高度
                $.fire(plus.webview.getWebviewById('page/main.index.html'), 'share_height_change', {
                    height: document.querySelector('ul').clientHeight
                });
                // 点击其他区域关闭自己
                doc.addEventListener('tap', function() {
                    closeSelf();
                }, false);
                // 阻止事件冒泡
                doc.querySelector('ul').addEventListener('tap', function (e) {
                	e.stopPropagation();
                }, false);
            });
        })(mui, document);
    </script>
</body>

</html>